<template>
  <div id="app" ref="app">
    <div class="top-nav" v-if="$route.name === 'Home'">
      <top-nav/>
    </div>
    <div class="inside-top-nav" v-else-if="notIncludedNavRouter">
      <top-search-nav/>
    </div>
<!--    <keep-alive>-->
<!--      <router-view class="child-view" v-if="$route.meta.keepAlive"/>-->
<!--    </keep-alive>-->
<!--    <router-view class="child-view" v-if="!$route.meta.keepAlive"/>-->
    <router-view class="child-view"/>

    <bot-footer v-if="notIncludedFooterRouter"/>
  </div>
</template>
<script>
import TopNav from '@/components/top-nav/top-nav'
import TopSearchNav from '@/components/top-nav/top-search-nav'
import BotFooter from '@/components/bot-footer/bot-footer'

export default {
  components: {
    TopNav,
    TopSearchNav,
    BotFooter,
  },
  name: 'app',
  watch: {
    '$route' (to, from) { // 回到首页
      this.$refs.app.scrollTop = 0
    }
  },
  data () {
    return {}
  },
  created () {
  },
  computed: {
    notIncludedNavRouter() { // 不展示头部的路由
      return this.$route.name !== 'Login' && this.$route.name !== 'Agreement' && this.$route.name !== 'Explain'
    },
    notIncludedFooterRouter() { // 不展示的底部路由
      return this.$route.name !== 'Login' && this.$route.name !== 'Explain'
    }
  },
  methods: {},
}
</script>
<style lang="stylus" scoped>
  .inside-top-nav {
    height 55px
    z-index 9
  }
</style>
